<template>
    <div class="digital">
        <div class="box-item">
            <li :class="{ 'number-item': !isNaN(item), 'mark-item': isNaN(item) }" v-for="(item, index) in orderNum"
                :style="[styleObject,isNaN(item)?markObjiect:'']" :key="index">
                <span v-if="!isNaN(item)">
                    <i :id="`numberItem${index}`" :ref="`numberItem${index}`">0123456789</i>
                </span>
                <span class="comma" :ref="`numberItem${index}`" style="font-family: 'sans-serif';margin-top:1.2rem"
                    v-else>{{ item }}</span>
            </li>
        </div>
    </div>
</template>
   
<script>
// ps 备注   里面的所有都使用了rem  所以传递单位为 rem   px 会影响界面布局效果

import { defineComponent, ref, toRefs, watch } from 'vue';
export default defineComponent({
    props: {
        // 数值
        numm: {
            type: Number,
            default: 0
        },
        // 是否逢三一断
        isComma: {
            type: Boolean,
            default: false
        },

        // 配置样式
        styleObject: {
            type: Object,
            default: () => {
                return {
                    color: '#333',
                    width: '1.5rem',//必须传递
                    height: '3rem',//必须传递
                    fontSize: '2.5rem',
                }
            }
        },
        // 标点符号等  需要单独设置  （因为如果统一设置 会影响到显示效果）
        markObjiect: {
            type: Object,
            default: () => {
                return {
                    width: '1rem',//必须传递
                    transform: 'translateX(-1rem)',
                }
            }
        },
    },
    setup(props) {
        const { numm, isComma, textColor, styleObject, markObjiect } = toRefs(props);

        const orderNum = ref([]);

        // 处理数字
        // numm: 传入的数字
        const toOrderNum = (num) => {
            num = num.toString();
            orderNum.value = amountMoney(num).split('') // 将其便变成数据，渲染至滚动数组
        }
        // 金额格式化，保留两位小数，三位以逗号隔开
        const amountMoney = (value) => {
            if (!value) return "0.00";
            let intPart = Number(value).toFixed(0); //获取整数部分
            let intPartFormat = ''
            // 判断是否需要添加逗号
            if (isComma.value) {
                intPartFormat = intPart
                    .toString().replace(/(\d)(?=(?:\d{3})+$)/g, "$1,"); //将整数部分逢三一断
            } else {
                intPartFormat = intPart.toString()
            }

            let floatPart = ".00"; //预定义小数部分
            let value2Array = value.split(".");
            //=2表示数据有小数位
            if (value2Array.length == 2) {
                floatPart = value2Array[1].toString(); //拿到小数部分
                if (floatPart.length == 1) {
                    //补0,
                    return intPartFormat + "." + floatPart + "0";
                } else {
                    return intPartFormat + "." + floatPart;
                }
            } else {
                return intPartFormat;
            }
        }

        toOrderNum(numm.value)
        watch(numm, (newVal) => {
            toOrderNum(newVal)
        })
        return {
            orderNum,
            toOrderNum,
            textColor,
            styleObject,
            markObjiect
        };
    },
    // 如果中途数据有更新，重新执行动画
    watch: {
        numm() {
            this.$nextTick(() => {
                this.setNumberTransform()
            })
        }
    },
    mounted() {
        setTimeout(() => {
            this.$nextTick(() => {
                this.setNumberTransform()
            })
        }, 200)
    },
    methods: {
        setNumberTransform() {
            // 结合CSS 对数字字符进行滚动,显示数量
            for (let index = 0; index < this.orderNum.length; index++) {
                const ele = this.$refs[`numberItem${index}`]
                if (ele) {
                    ele[0].style.transform = `translate(-50%, -${this.orderNum[index] * 10}%)`
                }
            }
        }
    }
})

</script>
<style lang='scss' scoped>
.digital {
    .box-item {
        position: relative;
        text-align: center;
        list-style: none;
        color: #333;
        writing-mode: vertical-lr;
        text-orientation: upright;
        /*文字禁止编辑*/
        -moz-user-select: none;
        /*火狐*/
        -webkit-user-select: none;
        /*webkit浏览器*/
        -ms-user-select: none;
        /*IE10*/
        -khtml-user-select: none;
        /*早期浏览器*/
        user-select: none;
        /* overflow: hidden; */

    }

    .mark-item {
        // transform: translateX(-0.7rem);
    }

    /*滚动数字设置*/
    .number-item {
        font-family: "DS-Digital";
        list-style: none;

        &>span {
            position: relative;
            display: inline-block;
            margin-right: .625rem;
            width: 100%;
            height: 100%;
            writing-mode: vertical-rl;
            text-orientation: upright;
            overflow: hidden;

            &>i {
                font-style: normal;
                position: absolute;
                top: .5rem;
                left: 50%;
                transform: translate(-50%, 0);
                transition: transform 1s ease-in-out;
                letter-spacing: .625rem;
            }
        }
    }

    .number-item:last-child {
        margin-right: 0 !important;
    }
}
</style>